<template>
    <div class="i-page account-page fill-height">
        <div class="i-content white pa-0 d-flex flex-column">
            <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
                <el-space>
                    <el-button plain type="primary" @click="api.onCreate()">创建</el-button>
                </el-space>
                <el-table
                        :data="api.tableState.dataSource"
                        border
                >
                    <el-table-column label="用户类型" prop="userType"/>
                    <el-table-column label="用户id" prop="userId"/>
                    <el-table-column label="用户名" prop="username"/>
                    <el-table-column label="密码" prop="password"/>
                    <el-table-column label="认证方式" prop="authType"/>
                    <el-table-column label="加密盐" prop="secretSalt"/>
                    <el-table-column label="是否过期" prop="accountNonExpired"/>
                    <el-table-column label="是否锁定" prop="accountNonLocked"/>
                    <el-table-column label="凭证是否过期" prop="credentialsNonExpired"/>
                    <el-table-column label="是否可用" prop="enabled"/>

                    <el-table-column :align="'center'" fixed="right" label="操作" width="280">
                        <template #default="{ row, column, $index }">
                            <el-space>
                                <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                                <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="api.onEdit(row.id)">编辑</el-button>
                                <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
                            </el-space>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="d-flex justify-end">
                    <el-pagination
                            v-model:current-page="api.tableState.pagination.current"
                            v-model:page-size="api.tableState.pagination.pageSize"
                            :total="api.tableState.pagination.total"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="api.refreshTable()"
                            @current-change="api.refreshTable()"
                    />
                </div>
            </el-space>
        </div>

        <Create :api="api"/>
        <Edit :api="api"/>
        <Detail :api="api"/>

    </div>
</template>

<script lang="ts" setup>
import {onMounted} from "vue";
import {AccountApi} from "~/api/system/account/account.api";
import Create from "./Create.vue";
import Edit from "./Edit.vue";
import Detail from "./Detail.vue";

const api = new AccountApi();

onMounted(() => {
    api.onListPage();
});
</script>

<style lang="scss" scoped>

</style>
